import React, { Component } from 'react';

import { connect } from 'react-redux'
import browserHistory from 'react-router/lib/browserHistory'


export default class CountdownCounter extends Component {
    constructor(props) {
        super(props);
        this._tick = this.tick.bind(this);
    }

    componentWillMount(){
        //console.log(this.props);
        this.setState({countdownTime: this.props.second});
    }
    tick(){
        this.setState({countdownTime: this.state.countdownTime-1});
    }
    componentDidMount() {
        this.interval = setInterval(this._tick, 1000);
    }
    componentWillUnmount(){
        clearInterval(this.interval);
    }

    //
    //decreaseTime(){
    //    if (this.state.countdownTime>0){
    //        this.setState({countdownTime: this.state.countdownTime-1});
    //        setTimeout(this.decreaseTime.bind(this),1000);
    //    }
    //
    //}


    getHourString(){
        var day = Math.floor(this.state.countdownTime/(60*60));
        if (day>9){
            return day;
        }else {
            return "0"+day;
        }
    }
    getMinuteString(){
        var day = Math.floor((this.state.countdownTime % (60*60))/60);
        if (day>9){
            return day;
        }else {
            return "0"+day;
        }
    }
    getSecondString(){
        var day = Math.floor((this.state.countdownTime % (60*60))%60);
        if (day>9){
            return day;
        }else {
            return "0"+day;
        }
    }

    render() {
        return (
            <div style={divStyle}>
                距开抢<span style={spanStyle}>{this.getHourString()}</span>
                :
                <span style={spanStyle}>{this.getMinuteString()}</span>
                :
                <span style={spanStyle}>{this.getSecondString()}</span>
            </div>

        )
    }
}
let divStyle = {
    position: "absolute",
    top: "0px",
    color: "#CEC9C9",
    fontSize: "10px",
    zIndex: 0,
    width:"100%",
    margin:"0 auto"
}

let spanStyle = {
    color: "white",
    backgroundColor: "#4A4A4A",
    padding: "1px",
    borderRadius:"4px"
}
CountdownCounter.defaultProps = {
    second:0
}

CountdownCounter.propTypes = {
    second:React.PropTypes.number

}


